<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <p>
            This tests the early return steps of <a href="https://html.spec.whatwg.org/multipage/scripting.html#prepare-a-script" target="_blank" rel="noopener noreferrer">"prepare a script"</a>
            that come <u>before</u> step 10 "Set the element's "already started" flag". The relevant steps are steps 6, 7 and 8.
            If this algorithm returns on any of these steps, the script can be reinserted matching the requirements and will run.
        </p>

        <p>Expected result:</p>
        <ul>
            <li>Step 6 test: I ran the second time around!</li>
            <li>Step 7 test: I ran the second time around!</li>
            <li>Step 8 test: I ran the second time around!</li>
        </ul>

        <br/>

        <p>Actual result:</p>
        <ul id="result-list">
        </ul>

        <!-- Setup code -->
        <script>
            // This returns a piece of code that will write a result to the actual result section.
            function getTestScript(stepNumber, iteration) {
                return `(() => {
                    const resultList = document.getElementById("result-list");
                    const resultEntry = document.createElement("li");
                    resultEntry.innerText = "Step ${stepNumber} test: I ran the ${iteration} time around!";
                    resultList.appendChild(resultEntry);
                })();`;
            }
        </script>

        <!-- Step 6 -->
        <script>
            const stepSixScript = document.createElement("script");

            // 6. If the element has no src attribute, and source text is the empty string, then return. The script is not executed.
            document.body.appendChild(stepSixScript);
            document.body.removeChild(stepSixScript);

            // Step 6 now passes.
            // 10. Set the element's "already started" flag.
            stepSixScript.innerText = getTestScript(6, "second");
            document.body.appendChild(stepSixScript);
            document.body.removeChild(stepSixScript);

            // 1. If the script element is marked as having "already started", then return. The script is not executed.
            stepSixScript.innerText = getTestScript(6, "third");
            document.body.appendChild(stepSixScript);
        </script>

        <template id="step-seven-template">
            <script>
                // This is duplicated from getTestScript as this script will not run because it's not connected.
                // See the NOTE in the script block below about why this is done here.
                (() => {
                    const resultList = document.getElementById("result-list");
                    const resultEntry = document.createElement("li");
                    resultEntry.innerText = "Step 7 test: I ran the first time around!";
                    resultList.appendChild(resultEntry);
                })();
            </script>
        </template>

        <!-- Step 7 -->
        <script>
            const stepSevenTemplate = document.getElementById("step-seven-template");
            const stepSevenScript = stepSevenTemplate.content.firstElementChild;

            // 7. If the element is not connected, then return. The script is not executed.
            // NOTE: This is done above because this can only be achieved via the parser, as the script element insertion steps do not prepare the script if the element is not connected.

            // Step 7 now passes.
            // 10. Set the element's "already started" flag.
            stepSevenScript.remove();
            stepSevenScript.innerText = getTestScript(7, "second");
            document.body.appendChild(stepSevenScript);
            document.body.removeChild(stepSevenScript);

            // 1. If the script element is marked as having "already started", then return. The script is not executed.
            stepSevenScript.innerText = getTestScript(7, "third");
            document.body.appendChild(stepSevenScript);
        </script>

        <!-- Step 8 -->
        <script>
            const stepEightScript = document.createElement("script");

            // 8. If either:
            //    ...snip...
            //    Otherwise, if the script element has a type attribute, let the script block's type string for this script element be the value of that attribute.
            //    Determine the script's type as follows:
            //    ...snip...
            //    - If neither of the above conditions are true, then return. No script is executed.
            stepEightScript.innerText = getTestScript(8, "first");
            stepEightScript.type = "unknown"; // Unknown type - the script won't run.
            document.body.appendChild(stepEightScript);
            document.body.removeChild(stepEightScript);

            //    Determine the script's type as follows:
            //    - If the script block's type string with leading and trailing ASCII whitespace stripped is a JavaScript MIME type essence match, the script's type is "classic".
            // 10. Set the element's "already started" flag.
            stepEightScript.innerText = getTestScript(8, "second");
            stepEightScript.type = "text/javascript"; // Known type - the script should now run!
            document.body.appendChild(stepEightScript);
            document.body.removeChild(stepEightScript);

            // 1. If the script element is marked as having "already started", then return. The script is not executed.
            stepEightScript.innerText = getTestScript(8, "third");
            document.body.appendChild(stepEightScript);
        </script>
    </body>
</html>
